<template>
    <div>
        <header>
            <div class="header-img">
                <img src="../../assets/img/header.png" />
                <div style="font-family: 微软雅黑">陈建明课题组</div>
            </div>
            <div class="menu-list">
                <div>
                    <div v-for="(item,index) in menuList" :key="index" @click.stop="toPage(item,true)" @mouseenter="visible(index)" @mouseleave="invisible(index)">
                        <span>{{item.name}}</span>
                        <div class="menu-sub" v-if="item.chidren&&item.show" >
                            <div v-for="(item2,index2) in item.chidren" :key="index2" @click.stop="toPage(item2,false)">
                                <div>{{item2.name}}</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </header>

        <div class="ind-con">
            <div class="container">
                <div class="main-ctn">
                    <router-view></router-view>
                </div>
            </div>
        </div>


        <footer>
            <div>Copyright©2020陈建明课题组版权所有 </div>
            <div>
                <div>地址：上海市杨浦区天辰路358号 邮编:200433</div>
             </div>
        </footer>
    </div>
</template>

<script>
export default {
    data(){
        return {
            menuList:[
                {name:"首页",path:'/home',show:false},
                {name:"课题组简介",path:'/projectIntro',show:false},
                {name:"组内成员",show:false,path:"/memberListTeacher",
                    chidren:[
                        {name:"组内老师",path:"/memberListTeacher"},
                        {name:"组内学生",path:"/memberListStu"},
                        {name:"已毕业成员",path:"/memberListGradute"},
                    ]},
                {name:"研究成果",show:false,path:'/researchFindings'},
                {name:"生活影集",show:false,path:"/lifeAblum"},
                {name:"联系我们",show:false,path:'/contactUs'},
            ],
        }
    },
    methods:{
        toPage(item,flag){
            this.$router.push(item.path)
            if(flag)return;
            this.centralControl.notice.emitBrother("routerChange",item);
        },
        gotoAdmin(){
            this.$router.push("/adminHome")
        },
        visible(index){
            this.menuList[index].show=true;
        },
        invisible(index){
            this.menuList[index].show=false;
        },
    },
}
</script>

<style lang="less">
.ind-con{
    // background: #faffe1 url(../../assets/img/inbg.jpg) no-repeat center center;
    min-height: 810px;
    padding-top: 25px;
    padding-bottom: 50px;
}
.container {
    width: 100%;
    margin: auto;
}
header{
     width: 100%;
    .header-img {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        >div {
            font-size: 50px;
            font-weight: bolder;
            letter-spacing: 30px;
        }
    }
    img {
        height: 80%;
        // width: 200px;
        // width:100%;
        font-size:0;
        margin-right: 60px;
    }
    .menu-list {
        background: #00659B;
        width: 100%;
        border-top: 1px solid #00659B;
        border-bottom: 1px solid #cdd1b8;
        >div {
            display: flex;
            justify-content: center;
            >div {
                cursor: pointer;
                color: #FFF;
                padding: 20px 0px;
                font-size:18px;
                position: relative;
                span {
                    border-right: 1px solid #FFF;
                    padding: 0 40px;
                }

            }
        }
        .menu-sub {
            position: absolute;
            bottom: -136px;
            left: 0;
            background: #FFF;
            width: 100%;
            color: #888;
            border: 1px solid #ccc;
            z-index: 1000;
            div {
                line-height: 25px;
                padding: 5px 10px;
                display: block;
                font-weight: normal;
                border: none;
                float: none;
                text-align: left;
                color: #333;
                font-size: 14px;
                background: none;
                width: 100%;
            }
            div:hover {
                color: #00659B;
            }
        }
    }
}

footer {
    font-size: 14px;
    padding: 20px 40px;
    background: #00659B;
    color: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .text {
        margin-top: 10px;
    }
}
</style>
